<template>
    <div class="wrapper">
        <div class="user-top" @click="toSign">
            <div class="icon-ele">
                <div class="quan-icon">
                    <i class="el-icon-eleme" style="color: white"></i>
                </div>
            </div>
            <div class="login-zhuce">
                <div>
                    <div style="color: white;font-weight: bold;font-size: 21px">登录/注册</div>
                    <div>
                        <i class="el-icon-mobile-phone" style="color: white;font-size: 14px"></i>
                        <span style="font-size: 14px;color: white">登陆后享受更多特权</span>
                    </div>
                </div>
            </div>
            <div class="jiantou">
                <i class="el-icon-arrow-right" style="color: white;font-size: 14px"></i>
            </div>
        </div>
        <div class="user-bottom">
            <div class="top-two">
                <div class="one-button">
                    <div>
                        <div style="width: 30px;height: 30px;border-radius: 50%;background-color: red;display: flex;justify-content: center;align-items: center">
                            <i class="el-icon-goods" style="color: white;font-size: 16px"></i>
                        </div>
                        <div style="font-size: 14px">红包</div>
                    </div>
                </div>
                <div class="two-button">
                    <div>
                        <div style="width: 30px;height: 30px;border-radius: 50%;background-color: mediumseagreen;display: flex;justify-content: center;align-items: center">
                            <i class="el-icon-coin" style="color: white;font-size: 16px"></i>
                        </div>
                        <div style="font-size: 14px">金币</div>
                    </div>
                </div>
            </div>
            <div class="one-slot">
                <information></information>
            </div>
            <div class="two-slot" style="margin-top: 12px">
                <information>
                    <i class="el-icon-shopping-bag-1" style="color: springgreen;font-size: 20px" slot="firstslot"></i>
                    <p slot="second-slot">金币商城</p>
                </information>
            </div>
            <div class="three-slot" style="margin-top: 12px;">
                <information>
                    <i class="el-icon-headset" style="color: dodgerblue;font-size: 20px" slot="firstslot"></i>
                    <p slot="second-slot">我的客服</p>
                </information>
            </div>
            <div class="four-slot" style="border: 1px solid #eeeeee">
                <information>
                    <i class="el-icon-platform-eleme" style="color: dodgerblue;font-size: 20px" slot="firstslot"></i>
                    <p slot="second-slot">下载饿了么APP</p>
                </information>
            </div>
            <div class="five-slot">
                <information>
                    <i class="el-icon-document" style="color: dodgerblue;font-size: 20px" slot="firstslot"></i>
                    <p slot="second-slot">规则中心</p>
                </information>
            </div>
            <div style="height: 80px;width: 100%;display: flex;justify-content: center;align-items: center">
                <p style="color: dodgerblue;font-size: 16px">隐私政策！！</p>
            </div>
        </div>
    </div>
</template>

<script>
    import information from "../../components/information";
    export default {
        name: "user",
        components:{
            information
        },
        methods:{
            toSign(){
                this.$router.push('/sign');
                this.$store.state.indexCurrent = 1;
            }
        }
    }
</script>

<style scoped>
    .wrapper{
        width: 375px;
        height: 607px;
        background-color: rgba(238, 238, 238, 0.86);
    }
    .user-top{
        width: 375px;
        height: 105px;
        background-color: blue;
        display: flex;
        flex-flow: row;
    }
    .icon-ele{
        flex: 1.3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login-zhuce{
        flex: 2.7;
        display: flex;
        /*justify-content: center;*/
        align-items: center;
        margin-left: 10px;
    }
    .jiantou{
        flex: 1.5;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 10px;
    }
    .quan-icon{
        height: 70px;
        width: 70px;
        background-color: #eeeeee;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
    }
    .top-two{
        height: 80px;
        width: 100%;
        display: flex;
        background-color: rgba(255, 255, 255, 0.91);
    }
    .one-button{
        flex: 1;
        border-right: 0.5px solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .two-button{
        flex: 1;
        border-left: 0.5px solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .one-slot{
        margin-top: 12px;
    }
</style>
